<template>
  <el-dialog :model-value="visible" :title="formModel.id ? '试卷修改' : '试卷添加'" width="800px" center align-center destroy-on-close @close="onClose">
    <el-form ref="formRef" :model="formModel" :rules="rules" label-width="80px" @submit.prevent>
      <el-form-item label="所属目录" prop="categoryId">
        <cascader-classify v-model="formModel.categoryId" :category-type="4" />
      </el-form-item>
      <el-form-item class="form-group" label="试卷名称" prop="paperName">
        <el-input v-model="formModel.paperName" placeholder="请输入试卷名称" maxlength="250" show-word-limit />
      </el-form-item>
      <el-form-item class="form-group" label="作答时间" prop="answerTime">
        <el-input-number v-model="formModel.answerTime" />&nbsp;分钟
        <span class="tip">试卷默认作答时间</span>
      </el-form-item>
      <el-form-item class="form-group" label="合格标准" prop="passPercentage">
        <el-input-number v-model="formModel.passPercentage" />&nbsp;%
        <span class="tip">试卷默认合格标准</span>
      </el-form-item>
      <el-form-item class="form-group" label="合格分" prop="passScore">
        <span>{{ ((formModel.totalScore * formModel.passPercentage) / 100) | '0' }} 分</span>
        <span class="tip">当前总分：{{ formModel.totalScore }}分，合格分 = 总分 x 合格标准</span>
      </el-form-item>
      <el-form-item label="乱序设置" prop="derangement">
        <el-switch v-model="formModel.derangement" />
        <span class="tip">开启后系统会根据设置自动生成试卷</span>
      </el-form-item>
      <el-form-item v-if="formModel.derangement" style="margin-left: 30px" label="" prop="questionDerangement">
        <el-checkbox v-model="formModel.questionDerangement" label="题目乱序" :disabled="!formModel.derangement" />
        <span class="tip">每张试卷的题目乱序</span>
      </el-form-item>
      <el-form-item v-if="formModel.derangement" style="margin-left: 30px" label="" prop="optionDerangement">
        <el-checkbox v-model="formModel.optionDerangement" label="选项乱序" :disabled="!formModel.derangement" />
        <span class="tip">每道题目的选项乱序</span>
      </el-form-item>
      <el-form-item label="随机组卷" prop="randomCombine">
        <el-switch v-model="formModel.randomCombine" />
        <span class="tip">开启后系统会根据规则自动生成试卷</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onClose()">取消</el-button>
      <el-button type="primary" @click="onSubmit()">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
  import { ElMessage } from 'element-plus'
  import { reactive, ref } from 'vue'
  import { questionApi } from '@/api/question.js'
  import CascaderClassify from '@/components/Cascader/Classify/index.vue'

  // 校验规则
  const formRef = ref()
  const rules = {
    categoryId: [{ required: true, message: '不能为空', trigger: 'blur' }],
    paperName: [{ required: true, message: '不能为空', trigger: 'blur' }]
  }

  // 表单
  const loading = ref(false) // 加载进度状态
  const emit = defineEmits(['refresh'])
  const formDefault = {
    id: undefined,
    paperName: undefined,
    paperType: 1,
    answerTime: 90,
    passPercentage: 60
  }
  const formModel = reactive({ ...formDefault })
  const onSubmit = async () => {
    // 校验
    const valid = await formRef.value.validate()
    if (!valid) return

    if (formModel.derangement) {
      if (!formModel.questionDerangement && !formModel.optionDerangement) {
        ElMessage.warning('请至少选择一种乱序规则')
        return
      }
    } else {
      formModel.questionDerangement = false
      formModel.optionDerangement = false
    }

    const paperModel = {
      id: formModel.id,
      paperName: formModel.paperName,
      paperType: formModel.paperType,
      categoryId: formModel.categoryId,
      answerTime: formModel.answerTime,
      passPercentage: formModel.passPercentage,
      derangement: formModel.derangement,
      questionDerangement: formModel.questionDerangement,
      optionDerangement: formModel.optionDerangement,
      randomCombine: formModel.randomCombine
    }

    if (loading.value === true) {
      ElMessage.warning('正在处理···')
      return
    }
    loading.value = true
    try {
      if (paperModel.id) {
        await questionApi.paperEdit(paperModel)
        ElMessage.success('修改成功')
      } else {
        await questionApi.paperSave(paperModel)
        ElMessage.success('添加成功')
      }
      emit('refresh')
      onClose()
    } finally {
      loading.value = false
    }
  }

  // 打开和关闭
  const visible = ref(false) // 弹窗显示状态
  const onOpen = (item) => {
    if (item) {
      Object.assign(formModel, item)
    }
    visible.value = true
  }
  defineExpose({ onOpen })
  const onClose = () => {
    visible.value = false
    Object.assign(formModel, formDefault)
  }
</script>
